<template>
    <section>
        <router-view></router-view>
    </section>

    <section ref="tabBarPlaceholder">
        <nut-tabbar v-model:visible="state.activatedTabBarItemIndex" :bottom="true" ref="tabBar">
            <nut-tabbar-item to="/message-page" tab-title="消息" icon="message"></nut-tabbar-item>
            <nut-tabbar-item to="/liaison-page" tab-title="联系人" icon="horizontal"></nut-tabbar-item>
            <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
            <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
        </nut-tabbar>
    </section>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive } from "vue";

const currentInstance = getCurrentInstance();

const state = reactive({
    activatedTabBarItemIndex: 0,
})

onMounted(() => {
    resizeTabBarPlaceholderElementHeight();
});

function resizeTabBarPlaceholderElementHeight() {
    const tabBarHeight = currentInstance.refs.tabBar.$el.offsetHeight;
    currentInstance.refs.tabBarPlaceholder.style.height = `${tabBarHeight}px`;
}

</script>